<template> 
  <div class="log-box">
    <img class="logo-rz" src="../assets/img/logo-rz.png">
    <div class="main-content">
      <div class="input-box"><span><svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-diary-zhanghao"></use>
                </svg></span><input v-model="dengLuName" id="account" type="text"></div>
      <div class="input-box"><span><svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-diary-password"></use>
                </svg></span><input v-model="dengLuWords" id="password" type="password"></div>
      <div class="log-self">
        <p>自动登录</p>
        <div class="log-self-button">
          <div class="row">
            <input type="checkbox" id="simple_2">
            <label for="simple_2" class="red"></label>
          </div>
        </div>
      </div>
    </div>
    <button class="submit" @click= "logSubmit">登录</button>
    <div class="link-register">
      <p v-on:click="changeView">注册账号</p>
      <p>忘记密码</p>
    </div>
  </div>
</template>
<script>
import Bus from "../assets/js/common/bus";
import { mapActions, mapState } from "vuex";
import Vue from "vue";
var vm = new Vue();
export default {
  name: "rzLog",
  // data:'',
  data() {
    return {
      dengLuName: "",
      dengLuWords: "",
      log_show: false,
      userInfo: {
        userName: "",
        password: "",
        uuid: "",
        token: ""
      }
    };
  },
  computed: {
    ...mapState(["isLogin"])
  },
  methods: {
    ...mapActions(["loginAction", "userInfoAction"]),
    changeView: function() {
      this.$emit("logShowOn", this.log_show);
    },
    IndengLuName(data) {
      // console.log(data);
      // console.log(vm.dengLuName);
      vm.dengLuName = data; // 将数据存入到全局对象 Vm 中
      // console.log(vm.dengLuName);
    },
    inputFocus: () => {
      let oHeight = $(window).height();
      $("input").focus(() => {
        $("body").css("height", oHeight);
        $(".log-main").css("height", oHeight);
      });
      $("input").blur(() => {
        $("body").css("height", "auto");
        $(".log-main").css("height", "100vh");
      });
    },
    logSubmit() {
      const app_key = "9F8943CA607331EB40EE1D01B720A01D";
      const app_secret =
        "osjSgu98tz79QFisU972YhIEgOc2NzetmPehplSUWW03jKQEOlyhJUCJYbnDlfD3";
      let dengLuWordsMd5 = this.$md5(this.dengLuWords);
      // console.log(dengLuWordsMd5);
      let app_sign =
        app_key +
        "" +
        dengLuWordsMd5 +
        "App.User.Login" +
        this.dengLuName +
        "" +
        app_secret;
      // console.log(app_sign);
      let appSignMd5 = this.$md5(app_sign).toUpperCase();
      // this.dengLuName = "";
      this.dengLuName =
        this.dengLuName === undefined ? "" : this.dengLuName.trim();
      this.dengLuWords =
        this.dengLuWords === undefined ? "" : this.dengLuWords.trim();
      // console.log(this.dengLuName);
      if (!this.dengLuName) {
        this.$layer.open({
          content: "请填写账号",
          skin: "msg",
          time: 2 //2秒后自动关闭
        });
        return false;
      }
      if (!this.dengLuWords) {
        this.$layer.open({
          content: "请填写密码",
          skin: "msg",
          time: 2 //2秒后自动关闭
        });
        return false;
      }
      let that = this;
      this.$axios
        .get(
          "/api/?s=App.User.Login&username=" +
            this.dengLuName +
            "&password=" +
            dengLuWordsMd5 +
            "&app_key=" +
            app_key +
            "&sign=" +
            appSignMd5
        )
        .then(data => {
          console.log(data);
          if (data.status === 200 && data.data.data.err_code === 0) {
            that.$layer.open({
              content: "登录成功",
              skin: "msg",
              style: "background-color:#67d974; color:#fff;",
              time: 1 //2秒后自动关闭
            });
            this.loginAction(1);
            this.userInfo.userName = this.dengLuName;
            this.userInfo.password = this.dengLuWords;
            this.userInfo.uuid = data.data.data.uuid;
            this.userInfo.token = data.data.data.token;
            this.userInfoAction(this.userInfo);
            this.$cookies.setCookie(
              "app_rizhi_",
              "uuid=" +
                data.data.data.uuid +
                "&token=" +
                data.data.data.token +
                "&userName=" +
                this.dengLuName +
                "&password=" +
                this.dengLuWords,
              48
            );
            console.log(this.$store);
            setTimeout(() => {
              // console.log(that.$route);
              if (that.$route.params.fromQuery) {
                that.$router.push({
                  path: that.$route.params.fromQuery
                });
              } else {
                that.$router.go(-1);
              }
            }, 1000);
          } else if (data.status === 200 && data.data.data.err_code === 1) {
            that.$layer.open({
              content: "用户名不存在或密码错误",
              skin: "msg",
              time: 2 //2秒后自动关闭
            });
          } else {
            return false;
          }
        })
        .catch(error => {
          self.fetchError = error;
        });
    }
  },
  created() {
    Bus.$on("zcName", this.IndengLuName);
    this.dengLuName = vm.dengLuName;
  },
  mounted() {
    // console.log(this.$cookies.getCookie("app_rizhi_"));
    // console.log(this.$store.state);
    // console.log(this.$route.params.fromQuery);
    // console.log(this.$route);
    if (this.$store.state.userInfo != "") {
      this.dengLuName = this.$store.state.userInfo.userName;
      this.dengLuWords = this.$store.state.userInfo.password;
    }
    this.inputFocus();
  }
};
</script>
